<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0;
        }
        .box{
            width: 700px;
            height: 400px;
            background-color: aquamarine;
        }
        .box1{
            width: 100%;
            height: 50px;
            background-color: greenyellow;
            line-height: 47px;
        }
        .box1 p{
            float: left;
            margin-left: 50px;
        }
        .box2{
            width: 100%;
            height: 350px;
            background-color: hotpink;
        }
        .on{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <script>
            var arr=[
                {'name':'网站','clied':['网站工程']},
                {'name':'传媒','clied':['传媒学院']},
                {'name':'游戏','clied':['游戏学院']},
            ]
        function Big(a){
            this.box1=document.querySelector('.box1');
            this.box2=document.querySelector('.box2');
            this.data=a;
            this.init();
        }
        Big.prototype={
            constructor:Big,
            init:function(){
                this.move();
            },
            move:function(){
                var that=this;
                this.box1.innerHTML=arr.map(function(v,i){
                    if(i==0){
                        return `<p class='on'}'>${v.name}</p>`
                    }else{
                        return `<p>${v.name}</p>`
                    }
                    
                }).join('');

                        var brr=arr[0].clied;
                        that.box2.innerHTML=brr.map(function(v,i){
                            return `<span>${v}</span>`
                        }).join('')
                var ps=document.querySelectorAll('.box1 p')
                this.box1.addEventListener('click',function(e){
                    var t=e.target;
                    if(t.tagName=='P'){
                        [...ps].forEach(function(v,i){
                            v.classList.remove('on');
                        })
                        t.classList.add('on');
                        var index=[...ps].indexOf(t);
                        var brr=arr[index].clied;
                        that.box2.innerHTML=brr.map(function(v,i){
                            return `<span>${v}</span>`
                        }).join('')

                    }
                })

            }
        }
        new Big(arr);
    </script>
</body>
</html>